<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const chartData = ref({})
	const opts = ref({
		color: ["#85d08d", "#91CB74", "#FAC858", "#EE6666"],
		padding: [15, 15, 0, 15],
		enableScroll: false,
		dataLabel:false,
		dataPointShape:true,
		dataPointShapeType:'solid',
		legend: {},
		xAxis: {
			disableGrid: true,
			calibration: true
		},
		yAxis: {
			disabled: false,
			// axisLine: false,
			disableGrid: false,
			splitNumber: 5,
			gridType: "dash",
			dashLength: 4,
			gridColor: "#CCCCCC",
			padding: 10,
			showTitle: true,
			data: [{
					position: "left",
					title: "折线",
					min: 0,
					max: 5
				},
				{
					position: "right",
					min: 0,
					max: 5,
					title: "柱状图",
					textAlign: "left"
				},
			]
		},
		extra: {
			mix: {
				column: {
					width: 35,
					activeType: "hollow",
				},
				line: {
					point: {
						show: true,      // 显示点
						size: 10,         // 点大小
						shape: "circle",  // 点形状
						fillColor: "#EE6666", // 填充色
						strokeColor: "#FFFFFF", // 边框色
						strokeWidth: 2    // 边框宽度
					},
					label: {
						show: false       // 隐藏数据标签
					}
				}
			}
		}
	})

	function getServerData() {
		setTimeout(() => {
			let res = {
				categories: ["2020", "2021", "2022", "2023"],
				series: [{
						name: "全球个人平均碳排放/吨",
						index: 1,
						type: "column",
						data: [4.34, 4.51, 4.58, 4.64]
					},
					{
						name: "个人碳排放/吨",
						type: "line",
						style: "straight",
						color: "#EE6666",
						disableLegend: true,
						point:{
							show: true,
							        size: 10
						},
						label:{
							show:false
						},
						data: [4.3, 4.36, 4.51, 4.3]
					},
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}

	onMounted(getServerData)
</script>

<template>
	<view class="charts-box">
		<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" :key="Date.now()"/>
	</view>
</template>

<style scoped lang="scss">
	.charts-box {
	  width: 100%;
	  height: 400rpx;
	}
</style>